<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加界面</title>
    <link href="http://localhost:8080/static/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <label class="layui-form-label">上级部门</label>
        <div class="layui-input-inline">
            <select name="parentId" id="deptIdSelect" lay-verify="required;">

            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-block">
            <input type="text" name="deptName" required  lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">显示排序</label>
        <div class="layui-input-block">
            <input type="text" name="orderNum" required  lay-verify="required" placeholder="请输入显示排序" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">负责人</label>
        <div class="layui-input-block">
            <input type="text" name="leader" required  lay-verify="required" placeholder="请输入负责人" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="0" title="正常" checked>
            <input type="radio" name="status" value="1" title="停用">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-block">
            <input type="text" name="phone" required  lay-verify="required" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <input type="text" name="remark" lay-verify="required" placeholder="请输入备注" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="http://localhost:8080/static/layui/layui.js"></script>
<script src="http://localhost:8080/static/layui/js/jquery-3.6.3.js"></script>
<script>

    $(function () {
        //获取请求地址栏(url)中带id的参数名称
        let deptId = getQueryletiable("deptId");
        queryDeptInfo(deptId);

        initDept();
    });

    //在编辑页面中回显数据
    function getQueryletiable(key) {
        let url = location.search;  //获取当前地址栏请求数据
        let theRequest = new Object();
        if (url.indexOf("?") != -1) {
            let str = url.substr(1);
            let strInfo = str.split("&");
            for (let i = 0; i < strInfo.length; i++) {
                theRequest[strInfo[i].split("=")[0]] = unescape(strInfo[i].split("=")[1]);
            }
        }
        let value = (theRequest[key] == null || theRequest[key] == undefined) ? null : theRequest[key];
        return value;
    }

    //根据id查询单条数据(在编辑页面中回显数据)
    function queryDeptInfo(deptId) {
        $.ajax({
            url: "http://localhost:8080/sysDept/selectDeptById.do",
            data: {"deptId": deptId},
            success: function (res) {
                let dept = res.data[0];
                $("[name= 'parentId']").val(dept.parentId);
            },
            error: function () {
                console.log("err...");
            }
        });
    }

    //部门信息回显
    function initDept(){
        $.ajax({
            url: "http://localhost:8080/sysDept/selectAllDept.do",
            type: "post",
            success: function (res) {
                //console.log(res);
                let data = res.data;
                let optionStr = `<option value="">请选择</option>`;

                $.each(data, function (i) {
                    let dept = data[i];
                    //console.log(dept);
                    optionStr += `
                        <option value="${dept.deptId}">${dept.deptName}</option>
                    `;
                });

                layui.use(['jquery', 'form'], function() {
                    var $ = layui.jquery, form = layui.form;
                    $('#deptIdSelect').html(optionStr);
                    // 添加完记得render下  否则不会刷新到页面中
                    form.render('select');
                })

            },
            error: function () {
                console.log(" err....");
            }
        });
    }

    //Demo
    layui.use('form', function () {
        let form = layui.form;

        //提交,form表单监听事件
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url: "http://localhost:8080/sysDept/addDept.do",
                data: data.field,
                type: "post",
                dataType: "json",
                success: function (res) {
                    //console.log(res);
                    if (res == 1) {
                        //添加成功，关闭当前弹窗层
                        layer.msg("添加成功");
                        let index = parent.layer.getFrameIndex(window.name);
                        //关闭当前窗口
                        parent.layer.close(index);
                        //刷新当前页面
                        parent.location.reload();
                    }
                },
                error: function () {
                    console.log(" err....");
                }
            });
        });
    });
</script>
</body>
</html>
